<template>
  <div class="box">
    <div class="head">
      <div class="head-left">
        <img src="" alt="">
        <div>assad</div>
      </div>
      <div class="head-right">
        <div class="card">
          <div>用户ID：</div>
          <div>22222121</div>
        </div>
        <div class="card">
          <div>用户昵称:</div>
          <div>222221212112144444</div>
        </div>
        <div class="card">
          <div>姓名：</div>
          <div>22222121</div>
        </div>
        <div class="card">
          <div>手机号码：</div>
          <div>22222121</div>
        </div>
        <div class="card">
          <div>身份证号：</div>
          <div>22222121</div>
        </div>
        <div class="card">
          <div>展馆开通：</div>
          <div>22222121</div>
        </div>
        <div class="card">
          <div>展馆名称：</div>
          <div>22222121</div>
        </div>
        <div class="card">
          <div>粉丝：</div>
          <div @click="Jumpfans(1)">22222121</div>
        </div>
        <div class="card">
          <div>关注：</div>
          <div @click="Jumpfans(2)">22222121</div>
        </div>
        <div class="card">
          <div>注册时间：</div>
          <div>22222121</div>
        </div>
        <div class="card" style="margin-right:10px">
          <div>最后登录：</div>
          <div>22222121</div>
        </div>
        <div class="butncard">
          <div class="butn1">启用/禁用账号</div>
          <div class="butn2" @click="chakan()">充值记录</div>
        </div>
      </div>

    </div>
    <div class="middle">
      <div class="heads">
        <img src="" alt="">
        <div>大唐链</div>
        <div class="dao">导出</div>
      </div>
      <div style="margin-top: 20px;">
        <el-radio-group v-model="radio1">
          <el-radio-button label="1">嗨艺购</el-radio-button>
          <el-radio-button label="2">嗨艺购2</el-radio-button>
          <el-radio-button label="3">嗨艺购3</el-radio-button>
        </el-radio-group>
      </div>
      <div class="title">当前大唐链-嗨艺购gas值：</div>
      <div style="margin-top: 20px;">
        <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            prop="date"
            label="藏品名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="藏品缩略图"
            width="180">
          </el-table-column>
          <el-table-column
            prop="address"
            label="藏品创作者"
            width="160"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="藏品故事">
          </el-table-column>
          <el-table-column
            prop="address"
            label="是否展示在展馆"
            width="130"
          >
          </el-table-column>

        </el-table>
      </div>
    </div>
    <div class="middle">
      <div class="heads">
        <img src="" alt="">
        <div>交易记录</div>
        <div class="dao">导出</div>
      </div>
      <div style="margin-top: 20px;">
        <el-radio v-model="radio2" label="1" border>转增记录</el-radio>
        <el-radio v-model="radio2" label="2" border>划转记录</el-radio>
      </div>
      <div style="margin-top: 20px;">
        <el-table
          v-if="radio2==1"
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            prop="date"
            label="转赠单号"
            width="160">
          </el-table-column>
          <el-table-column
            prop="name"
            label="藏品缩略图"
            width="160">
          </el-table-column>
          <el-table-column
            prop="address"
            label="藏品名称"
            width="140"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="转赠人"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="转赠人手机号"
            width="130"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="接收人"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="接收人手机号"
            width="130"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="转赠时间"
            width="140"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="接收时间"
            width="140"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="藏品故事">
          </el-table-column>
          <el-table-column
            prop="address"
            label="是否展示在展馆"
            width="80"
          >
          </el-table-column>
        </el-table>
        <div v-if="radio2==2">
          <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
              prop="date"
              label="申请id"
              width="160">
            </el-table-column>
            <el-table-column
              prop="name"
              label="商品名称"
              width="160">
            </el-table-column>
            <el-table-column
              prop="address"
              label="发起人"
              width="140"
            >
            </el-table-column>
            <el-table-column
              prop="address"
              label="数量"
              width="120"
            >
            </el-table-column>
            <el-table-column
              prop="address"
              label="类型"
              width="130"
            >
            </el-table-column>
            <el-table-column
              prop="address"
              label="状态"
              width="120"
            >
            </el-table-column>
            <el-table-column
              prop="address"
              label="时间"
              width="140"
            >
            </el-table-column>
            <el-table-column
              prop="address"
              label="转入点选"
              width="130"
            >
            </el-table-column>

            <el-table-column
              prop="address"
              label="海文交Useid"
              width="140"
            >
            </el-table-column>
            <el-table-column
              prop="address"
              label="接收人">
            </el-table-column>

          </el-table>
        </div>
      </div>
    </div>
    <!-- <add-or-fase ref="addOrUpdate" v-if="userfaseshow" @refreshDataList="refreshChange">

    </add-or-fase> -->
    <add-or-update v-if="userfaseshow" ref="addOrUpdate" @refreshDataList="refreshChange"></add-or-update>


  </div>
</template>

<script>
import AddOrUpdate from './user-add-or-fase'
// import AddOrUpdate from './user-add-or-update'

export default {

  data() {
    return {
      radio1: '1',
      radio2: '1',
      userfaseshow: false,
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }]
    }
  },
  components: {
    AddOrUpdate

  },
  methods: {
    chakan () {
      // this.$router.push({ path: '/platform-mall/userrecord', query: {shopId: id} })
      this.$router.push({path: '/user-userrecord'})
    },

    Jumpfans (nan) {
      console.log(nan)
      this.userfaseshow = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(nan)
      })
    },
    // 刷新回调
    refreshChange () {

    }
  }

}
</script>

<style lang="scss" scoped>
.box {
  padding: 0 40px;
}

.head {
  width: 1500px;
  height: 200px;
  border: 1px solid black;

}

.head-left {
  width: 300px;
  display: flex;
  padding: 20px 0px;
  margin-right: 74px;
}

.head-right {
  width: 1150px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap
}

.head-right .card {
  display: flex;
  margin-right: 40px;
  justify-content: space-between;
  margin-top: 15px;
  font-size: 15px;
  height: 40px;
  line-height: 40px;
  min-width: 190px;
}

.butncard {
  display: flex;
  margin-top: 14px;
  width: 265px;
}

.butncard .butn1 {
  width: 110px;
  height: 40px;
  background-color: red;
  border-radius: 5px;
  text-align: center;
  line-height: 40px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.butncard .butn2 {
  width: 110px;
  height: 40px;
  background-color: #02A7F0;
  border-radius: 5px;
  text-align: center;
  line-height: 40px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  margin-left: 20px;


}

.middle {
  width: 1500px;
  border: 1px solid black;
  height: 700px;
  padding: 10px 40px;
  margin-top: 20px;

}

.middle .heads {
  display: flex;
  width: 200px;
  line-height: 30px;

}

.middle .dao {
  width: 70px;
  height: 30px;
  background-color: #02A7F0;
  border-radius: 5px;
  text-align: center;
  line-height: 30px;
  color: #fff;
  margin-left: 30px;
}

.title {
  font-size: 20px;
  font-weight: 600;
  margin-top: 20px;
}
</style>
